<template>
  <div>
    <div class="header-bar dis-flex justify-between align-center">
      <div class="dis-flex align-center">
        <sider-trigger
            class="public-pc-style"
            :collapsed="collapsed"
            icon="md-menu"
            @on-change="handleCollpasedChange"
        ></sider-trigger>
        <!-- <sider-trigger :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger> -->

      </div>
      <!-- <custom-bread-crumb show-icon style="margin-left: 30px;" :list="breadCrumbList"></custom-bread-crumb> -->

      <div class="custom-content-con">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
import siderTrigger from "./sider-trigger";
import customBreadCrumb from "./custom-bread-crumb";
import "./header-bar.less";
export default {
  name: "HeaderBar",
  components: {
    siderTrigger,
    customBreadCrumb,
  },
  props: {
    collapsed: Boolean,
  },
  computed: {
    breadCrumbList() {
      return this.$store.state.app.breadCrumbList;
    },
  },
  methods: {
    handleCollpasedChange(state) {
      this.$emit("on-coll-change", state);
    },
  },
};
</script>
<style lang="scss" scoped>
.header-bar >>> .sider-trigger-a {
  margin-top: 0;
}
.head-title {
  font-weight: 600;
  font-size: 20px;
  margin-left: 20px;
  line-height: 24px;
}
.custom-content-con {
  flex: 0 0 400px;
  -webkit-flex: 0 0 400px;
}
@media screen and (max-width: 749px) {
  .head-title {
    margin-left: 0;
  }
}
</style>
